<template>
	<view class="inspect-main">
        <!-- @change="change" -->
        <uni-collapse>
            <uni-collapse-item
                v-for="(inspect, index) in inspects" :key="index"
                :title="inspect.title"
                thumb="/static/imgs/icon/red_light.png"
                tip="异常"
            >
                <!-- @change="change" -->
                <uni-collapse>
                    <uni-collapse-item
                        v-for="(inpectItem, iIndex) in inspect.inpectItemList" :key="iIndex"
                        :title="inpectItem.name"
                        thumb="/static/imgs/icon/red_light.png"
                        tip="异常"
                        tipType="1"
                        level="2"
                    >
                        <view class="inspect-check-item">
                            <view v-for="(children, cIndex) in inpectItem.childrens" :key="cIndex"
                                class="inspect-check-item-content" 
                                :class="'inspect-check-item-content-select'"
                            >
                                {{ children.content }}
                            </view>
                        </view>
                        <view v-if="inspectType == 1">
                            <view class="inspect-check-item">现场整改</view>
                            <view class="inspect-check-item">
                                <view v-for="(rectify, rIndex) in rectifies" :key="rIndex"
                                    class="inspect-check-item-content" 
                                >
                                    {{ rectify.name }}
                                </view>
                            </view>
                            <view class="attachment">
                                <view class="attribute">
                                    <view class="asterisk">*</view>
                                    <view>现场图片</view>
                                </view>
                                <view class="attachment-area">
                                    <view class="attachment-area-item" v-for="(item, index) in inpectItem.imageList"
                                        :v-bind:key="index" :key="index">
                                        <image class="image-style" :src="item.src" 
                                            @click="previewImage(inpectItem.imageList, index)">
                                        </image>
                                        <image class="image-delete" 
                                            src="/static/imgs/icon/clo.png"
                                            @click="deleteFile(1, item)">
                                        </image>
                                    </view>
                                    <!-- <view class="attachment-area-item" v-for="(item, index) in inpectItem.fileList"
                                        :v-bind:key="index" :key="index">
                                        <image class="image-style" src="/static/imgs/icon/icon_file_default.png">
                                        </image>
                                        <image class="image-delete" 
                                            src="/static/imgs/icon/clo.png"
                                            @click="deleteFile(1, item)">
                                        </image>
                                    </view> -->
                                    <ray-pick-files v-if="!inpectItem.imageList || inpectItem.imageList < 2"
                                        :menuType="'0'" :bizType="bizType" :fileGroup="test"
                                        @filePickedChange="filePickedChange" :filePicked="'filePickedChange'"
                                    >
                                    </ray-pick-files>
                                    <!-- <view v-if="imagePaths[1].length < 4 && editEnable" 
                                        class="attachment-area-item attachment-area-item-center"
                                        @click="chooseImage(1)"
                                        >
                                        <image class="image-add" src="/static/imgs/icon/add.png">
                                        </image>
                                    </view> -->
                                </view>
                            </view>
                        </view>
                    </uni-collapse-item>
                </uni-collapse>
            </uni-collapse-item>
        </uni-collapse>
        
	</view>
</template>

<script>
import Vue from 'vue';
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
import { RayPickFiles } from '@/components/ray-pick-files/ray-pick-files.vue';

export default {
	name: 'ray-inspect',
    components: { uniCollapse, uniCollapseItem },
	props: {
        
        /**
         * 数据字典默认值
         */
        dicDefault: {
        	type: String,
        	default() {
        		return '';
        	}
        },
        /**
         * 是否禁用
         */
        selectEnable: {
            type: Boolean,
            default: false
        },
        
        /**
         * 回调函数方法名，默认为inspectSelected
         */
		inspectSelected: {
			type: String,
			default() {
				return 'inspectSelected';
			}
		},
        
        /**
         * 0巡查，1复查
         */
        inspectType: {
        	type: [String, Number],
        	default() {
        		return 0;
        	}
        },
	},
	components: {},
	data() {
		return {
            // 原始数据巡查项
            originInpects: [
                {
                    title: "消防安全",
                    inpectItemList: [
                        {
                            name: "消防安全规定",
                            childrens: [
                                {
                                    content: "正常",
                                    value: "0",
                                },
                                {
                                    content: "异常",
                                    value: "0",
                                },
                                {
                                    content: "异常1",
                                    value: "0",
                                },
                            ],
                        }
                    ],
                },
                {
                    title: "消防安全",
                    inpectItemList: [
                        {
                            name: "消防安全规定",
                            childrens: [
                                {
                                    content: "正常",
                                    value: "0",
                                },
                                {
                                    content: "异常",
                                    value: "0",
                                },
                                {
                                    content: "异常1",
                                    value: "0",
                                },
                            ],
                        }
                    ],
                },
                {
                    title: "消防安全",
                    inpectItemList: [
                        {
                            name: "消防安全规定",
                            childrens: [
                                {
                                    content: "正常",
                                    value: "0",
                                },
                                {
                                    content: "异常",
                                    value: "0",
                                },
                                {
                                    content: "异常1",
                                    value: "0",
                                },
                            ],
                        }
                    ],
                },
            ],
            // 处理后的巡查项，可以是巡查，也可以是复查
            inspects: [],
            
            rectifies: [
                {
                    name: "已整改",
                    value: "0",
                },
                {
                    name: "未整改",
                    value: "1",
                },
            ],
		};
	},
	onLoad() {},
	created() {
        this.inspects = { ...this.originInpects };
		// if (!this.dicLabel) {
		// 	uni.showToast({
		// 		title: '请设置dicLabel数据字典标签',
		// 		icon: 'none'
		// 	});
		// }
	},
	onShow() {},
	methods: {
		/**
		 * @description:value 改变时触发 change 事件
		 * @author ray
		 */
		bindChange(e) {
            
			this.$emit(this.inspectSelected, "返回数据");
		},
        
        /**
         * @description:某一列的值改变时触发 columnchange 事件
         * @author yaoyanhui
         */
        bindColumnchange(e) {
        	console.log(e.detail)
        	if (e.detail.column == 0) {
                
        	}
        },
        
        /**
         * 附件选取回调
         * @param {Object} val
         */
        filePickedChange (val) {
            console.log(val);
            
        },
        
        /**
         * 删除附件
         * @param {Object} pos 所选位置 0门面照；1特写照；2营业执照
         * @param {Object} item
         */
        deleteFile (pos, item) {
            let _this = this;
            console.log(pos);
            uni.showModal({
                title: '提示',
                content: '确定要删除该文件吗',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        // fileType, image/auido/video
                        if (item.fileType == "image") {
                            _this.imagePaths[pos].some((t, i) => {
                            	if (t.src == item.src ){
                            		_this.imagePaths[pos].splice(i, 1);
                            		// 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环,所以相比较foreach，如果想要终止循环，那么建议使用some
                            		return true;
                                }
                            });
                        } else {
                            _this.filePaths[pos].some((t, i) => {
                            	if (t.src == item.src ){
                            		_this.filePaths[pos].splice(i, 1);
                            		// 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环,所以相比较foreach，如果想要终止循环，那么建议使用some
                            		return true;
                                }
                            });
                        }
                        
                        // let deleteParams = [ item.systemid ];
                        // _this.$api.attachmentDel(JSON.stringify([item.systemid])).then(
                        //     resp => {
                        //         if (resp.state){
                        //             showToast({
                        //             	title: '删除成功！',
                        //             	icon: 'none'
                        //             });
                        //             // _this.imagePaths[pos] = (_this.imagePaths[pos]).filter(t => t.systemid != item.systemid);
                        //             _this.imagePaths[pos].some((t, i) => {
                        //             	if (t.systemid == item.systemid ){
                        //             		_this.imagePaths[pos].splice(i, 1);
                        //             		// 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环,所以相比较foreach，如果想要终止循环，那么建议使用some
                        //             		return true;
                        //                 }
                        //             });
                        //         }
                        //     }
                        // );
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        
        /**
         * 图标片预览
         */
        previewImage (arrayList, index) {
            let paths = [];
            console.log(arrayList, index);
            arrayList.forEach((item) => {
                paths.push(item.src);
            });
            // 预览图片
            uni.previewImage({
                urls: paths,
                current: index,
                // 图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
                indicator: 'default',
            });
        },
	}
};
</script>
<style lang="scss" scoped>
.inspect-main {
    .inspect-check-item {
        padding: 10rpx 10rpx 10rpx 20rpx;
        display: flex;
        // justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    
        .inspect-check-item-content {
            padding: 10rpx 20rpx;
            // border: 1rpx solid #C0C0C0;
            background-color: #DCDCDC;
            border-radius: 20rpx;
            margin: 10rpx;
            display: flex;
            font-size: 24rpx;
            color: #666666;
            align-items: center;
        }
        
        .inspect-check-item-content-select {
            background-color: #6084e9;
            color: #ffffff;
        }
    }
    .attachment {
        padding: 20rpx 10rpx;
        border-bottom: 1rpx solid #f5f5f5;
        margin: 0 10rpx;
        
        .attribute {
            display: flex;
            
            .asterisk {
                color: #ff0000;
                padding: 0 5rpx;
                width: 30rpx;
            }
        }
        
        .attachment-area {
        	margin-top: 10rpx;
        	// padding: 10rpx;
        	// border: 0.1rpx solid #cdcdcd;
        	border-radius: 5rpx;
        	display: flex;
        	flex-wrap: wrap;
        	flex-direction: row;
        	justify-content: flex-start;
        
            .attachment-area-item-center {
                justify-content: center;
                align-items: center;
                background-color: #f5f5f5;
            }
        	.attachment-area-item {
        		width: 130rpx;
                height: 130rpx;
        		// padding-top: 20rpx;
        		// padding-bottom: 20rpx;
        		// padding-left: 10rpx;
        		// padding-right: 10rpx;
                padding: 5rpx;
        		// background-color: #f5f5f5;
        		border-radius: 5rpx;
        		// border: 0.1rpx solid #cdcdcd;
        		margin: 15rpx;
                // align-items: center;
                display: flex;
                // justify-content: center;
                position: relative;
                
                .image-style {
                    width: 130rpx;
                    height: 130rpx;
                }
                
                .image-add {
                    width: 48rpx;
                    height: 48rpx;
                }
                
                .image-delete {
                    position: absolute;
                    z-index: 10;
                    font-size: 18px;
                    color: #ee0a24;
                    width: 48rpx;
                    height: 48rpx;
                    margin-left: 90rpx;
                    margin-top: -20rpx;
                }
        
        		.attachment-area-item-value {
        			font-size: 26rpx;
        			color: #666666;
        			text-align: start;
        		}
        	}
        }
    }
}
</style>
